<template>
    <div class="login-page">
        <div class="login-container">
            <div class="hat-box">
                <img src="@/assets/images/icon-hat.png" alt="帽子" width="100%">
            </div>
            <div class="login-content">
                <div class="head-box">
                    <h1 class="title">车辆资产交接清单</h1>
                    <p class="tips">请登录您的账号</p>
                </div>
                <div class="line">
                    <img src="@/assets/images/line.png" alt="帽子" width="100%">
                </div>
                <van-tabs :active="active" @change="onChange">
                    <van-tab title="账号密码登录">
                        <van-form @submit="onSubmit">
                            <van-field v-model="form.username" name="username" label="用户名" placeholder="请输入用户名" />
                            <van-field v-model="form.password" type="password" name="password" label="请输入密码"
                                placeholder="密码" />
                            <div class="btn-box">
                                <van-button block type="primary" native-type="submit">登录</van-button>
                            </div>
                        </van-form>
                    </van-tab>
                    <van-tab title="验证码登录">
                        <van-form @submit="onSubmit">
                            <van-field v-model.number="form.phone" name="username" type="number" label="手机号"
                                maxlength="11" placeholder="请输入手机号" />
                            <van-field v-model.number="form.code" type="number" placeholder="请输入6位验证码" maxlength="6" />
                            <span class="get-code" @click="!disabled ? getCode() : ''">{{ btntext }}</span>
                            <div class="btn-box">
                                <van-button block type="primary" native-type="submit">登录</van-button>
                            </div>
                        </van-form>
                    </van-tab>
                </van-tabs>
                <p class="foot-tips">
                    <van-divider contentPosition="center" textColor="#1333">如有问题请联系管理员</van-divider>
                </p>
            </div>
            <div class="copyright">Copyright 2024 幸福时代有限公司版权所有 <br>粤ICP备 xxxxx号-x</div>
        </div>
        <div class="bg-icon">
            <img class="n0 n1" src="@/assets/images/icon-login-bg-01.svg" alt="图标" width="100%">
            <img class="n0 n2" src="@/assets/images/icon-login-bg-02.svg" alt="图标" width="100%">
            <img class="n0 n3" src="@/assets/images/icon-login-bg-01.svg" alt="图标" width="100%">
            <img class="n0 n4" src="@/assets/images/icon-login-bg-02.svg" alt="图标" width="100%">
        </div>
    </div>
</template>

<script setup>
import api from "@/api"
import { ref, reactive } from 'vue'
import { isPhone } from '@/util'
import { showToast } from "vant"

const getGoodsnum = inject('$provideGoodsnum')
const getLang = inject('$provideLang')
const router = useRouter();
let active = ref(0)
let disabled = ref(false)
let codeTime = ref(60)
let btntext = ref('获取验证码')
let form = reactive({
    username: 'admin',
    password: 'admin',
    phone: '',
    code: ''
})

const onChange = (e) => {
    console.log(e);
}

const onSubmit = async () => {
    await getGoodsnum()
    await getLang()
    router.replace({ name: "Home" })
}
const getCode = () => {
    if (!form.phone) return showToast('请输入手机号')
    if (!isPhone(form.phone)) return showToast('手机号格式不正确')
    let data = {
        mobileNo: form.phone
    }
    api.getCode(data).then(res => {
        console.log('发送请求')
        console.log(res)
        // if (res.code == 0) {
        //     countDown()
        // }
    })
}

const countDown = () => {
    if (disabled) {
        return false
    }
    codeTime = 60 // 1分钟倒计时
    // 不允许多次点击
    disabled = true
    // 倒计时
    let timer = setInterval(() => {
        btntext = `${codeTime}s可重发`
        codeTime--
        if (codeTime < 0) {
            // 1分钟后再次可以点击
            disabled = false
            btntext = `重新获取`
            clearInterval(timer)
        }
    }, 1000)
    return true
}
</script>

<style lang="less" scoped>
@brand-color: #ff7d00;

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #FF7D00;
    background-repeat: no-repeat;
    background-size: cover;

    .login-container {
        position: relative;
        z-index: 9;

        .hat-box {
            width: 60px;
            height: 60px;
            margin: 0 auto -22px;

            img {
                width: 100%;
            }
        }

        .login-content {
            margin: 0 20px;
            padding: 30px 10px 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

            .head-box {
                .title {
                    margin: 0;
                    font-size: 18px;
                    text-align: center;
                }

                .tips {
                    height: 30px;
                    line-height: 30px;
                    margin-top: 20px;
                    padding: 0 20px;
                    color: #333;
                    font-size: 12px;
                    background-color: #FFEFD6;
                    border: 1px solid #FFE8C4;
                    border-radius: 6px;
                }
            }

            .line {
                margin: 0 -10px;
            }

            :deep(.van-tabs) {
                .van-tabs__line {
                    background: @brand-color;
                }
            }

            .van-form {
                position: relative;
                margin-top: 10px;

                .get-code {
                    position: absolute;
                    top: 55px;
                    right: 15px;
                    padding-left: 12px;
                    color: #D63547;
                    font-size: 14px;
                    border-left: 1px solid #DEE4EA;
                }

                .btn-box {
                    margin: 16px;
                }
            }

            .foot-tips {
                text-align: center;
                font-size: 12px;
            }
        }

        .copyright {
            margin-top: 20px;
            color: #fff;
            font-size: 14px;
            text-align: center;
        }
    }

    .bg-icon {
        position: absolute;
        z-index: 1;
        width: 100vw;
        height: 100vh;

        .n0 {
            position: absolute;
            width: 150px;
        }

        .n1 {
            top: -10px;
            left: -70px;
        }

        .n2 {
            top: -20px;
            right: -40px;
        }

        .n3 {
            bottom: 30px;
            right: -60px;
            transform: rotate(90deg);
        }

        .n4 {
            bottom: -50px;
            left: -60px;
        }
    }
}
</style>
